<template>
  <div
    class="app-container peizhi"
    style="position: relative"
    v-loading="loading"
  >
    <el-form
      ref="eventsForms"
      label-position="right"
      label-width="100px"
      :model="eventsForms"
      size="small"
      ><div v-for="(item, index) in dataList" :key="index">
        <div v-if="index == 0">
          <div class="blockquote-box">{{ item.name }}</div>
          <div class="form-box">
            <el-form-item label="取消时间" class="form-box-item flex-box">
              <el-input
                v-model="eventsForms.order_auto_cancel_minutes"
                type="text"
                placeholder="请输入取消时间"
              />
              <div class="left20 tipbox">
                创建订单后多长时间之后没有支付,将自动取消该订单(分钟)
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-if="index == 1">
          <div class="blockquote-box">{{ item.name }}</div>
          <div class="form-box">
            <el-form-item label="收货时间" class="form-box-item flex-box">
              <el-input
                v-model="eventsForms.order_auto_delivery_confirm_days"
                type="text"
                placeholder="请输入收货时间"
              />
              <div class="left20 tipbox">
                自发货起 订单多少天之后进行自动收货(天)
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-if="index == 2">
          <div class="blockquote-box">{{ item.name }}</div>
          <div class="form-box">
            <el-form-item label="评价时间" class="form-box-item flex-box">
              <el-input
                v-model="eventsForms.order_auto_comment_days"
                type="text"
                placeholder="请输入评价时间"
              />
              <div class="left20 tipbox">
                自确认收货后起 订单多少天之后进行自动评价(天)
              </div>
            </el-form-item>
          </div>
        </div>
        <div v-if="index == 3">
          <div class="blockquote-box">{{ item.name }}</div>
          <div class="form-box">
            <el-form-item label="评价内容" class="form-box-item">
              <div>
                <el-input
                  style="width: 600px"
                  v-model="eventsForms.order_auto_comment_content"
                  type="textarea"
                  placeholder="请输入评价内容"
                />
              </div>
              <div class="tipbox">进行自动评价时,所评价的内容</div>
            </el-form-item>
          </div>
        </div>
        <div v-if="index == 4">
          <div class="blockquote-box">{{ item.name }}</div>
          <div class="form-box">
            <el-form-item label="售后期限" class="form-box-item flex-box">
              <div>
                <el-input
                  v-model="eventsForms.order_refund_days"
                  type="text"
                  placeholder="请输入售后期限"
                />
              </div>
              <div class="left20 tipbox">自收货后起,多少天内可进行售后</div>
            </el-form-item>
          </div>
        </div>
        <div v-if="index == 5">
          <div class="blockquote-box">{{ item.name }}</div>
          <div class="form-box">
            <el-form-item label="订单售后原因" class="form-box-item">
              <div>
                <el-tag
                  :key="tag"
                  v-for="tag in eventsForms.order_refund_reason"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="tabinput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ 添加售后原因</el-button
                >
              </div>
              <div class="tipbox">申请售后可选着的售后原因</div>
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
    <div style="text-align: center">
      <el-button
        style="width: 100px"
        type="primary"
        @click="gradeSubmitForm('eventsForms')"
        >提交</el-button
      >
    </div>
  </div>
</template>
  <script>
import LogoUpload from "@/components/FileUpload";
import { saveOrderConfig, getOrderConfig } from "@/api/order/index";
export default {
  components: {
    LogoUpload,
  },
  data() {
    return {
      loading: true,
      eventsForms: {
        order_auto_cancel_minutes: "", // 	订单自动取消时间（分钟）
        order_auto_delivery_confirm_days: "", //订单自动收货时间（天）
        order_auto_comment_days: "", // 	订单自动评价时间（天）
        order_auto_comment_content: "", // 订单自动评价内容
        order_refund_days: "", // 售后期限配置（天）
        order_refund_reason: [],
      },
      avatarFile: [],
      dataList: [],

      inputVisible: false,
      inputValue: "",
    };
  },
  created() {
    this.getDataWay();
  },
  methods: {
    getDataWay() {
      this.loading = true;
      getOrderConfig().then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.dataList = res.data;
        this.dataList.forEach((item) => {
          if (item.tag == "order_auto_cancel_minutes") {
            this.eventsForms.order_auto_cancel_minutes = item.value;
          }
          if (item.tag == "order_auto_delivery_confirm_days") {
            this.eventsForms.order_auto_delivery_confirm_days = item.value;
          }
          if (item.tag == "order_auto_comment_days") {
            this.eventsForms.order_auto_comment_days = item.value;
          }
          if (item.tag == "order_auto_comment_content") {
            this.eventsForms.order_auto_comment_content = item.value;
          }
          if (item.tag == "order_refund_days") {
            this.eventsForms.order_refund_days = item.value;
          }
          if (item.tag == "order_refund_reason") {
            this.eventsForms.order_refund_reason = JSON.parse(item.value);
          }
        });
      });
    },

    gradeSubmitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let objForm = JSON.parse(JSON.stringify(this.eventsForms));
          objForm.order_refund_reason = JSON.stringify(
            objForm.order_refund_reason
          );
          saveOrderConfig(objForm).then((res) => {
            this.loading = false;
            if (res.code !== 200 || res.status !== 1) {
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.getDataWay();
          });
        } else {
          return false;
        }
      });
    },
    handleClose(tag) {
      this.eventsForms.order_refund_reason.splice(
        this.eventsForms.order_refund_reason.indexOf(tag),
        1
      );
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        // this.$refs.tabinput.focus()
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.eventsForms.order_refund_reason.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>
  <style lang="scss">
.peizhi {
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 200px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}

.flex-box {
  .el-form-item__content {
    display: -webkit-box;
  }
}

.form-box {
  .form-box-item {
    .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
    }

    .el-upload--picture-card {
      width: 100px;
      height: 100px;
      line-height: 110px;
    }
  }
}
</style>
  <style lang="scss" scoped>
.app-container {
  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .form-box {
    margin: 0 20px;

    .form-box-item {
      padding-bottom: 10px;
      padding-right: 20px;
      font-size: 12px;
      color: #4c4c4c;

      .left20 {
        margin-left: 20px;
      }

      .tipbox {
        font-size: 12px;
        color: #4c4c4c;
      }
    }
  }
}
</style>